<script setup>
import {ref, provide} from 'vue'
import {Setting} from '@element-plus/icons-vue'

const path_list=ref([])
provide("path_list",path_list)

var date=new Date()
var current_month=`${date.getFullYear()}-${date.getMonth()+1}`
const month_or_year=ref('月度')
const period=ref(current_month)
</script>
<template>
<div class="container">
  <div class="top">
  <div class="title">数字党建<span class="subtitle" v-show="$route.name!='首页'">{{ $route.name }}</span></div>
  <div class="period" v-show="$route.meta.period">
    <span>统计周期</span>
    <el-select v-model="month_or_year" style="width:80px;">
      <el-option key="1" label="月度" value="月度"/>
      <el-option key="2" label="年度" value="年度"/>
    </el-select>
    <el-date-picker v-model="period" :type="month_or_year=='月度'?'month':'year'"/>
  </div>
</div>
<div class="navigator">
  <el-breadcrumb separator="/">
    <el-breadcrumb-item><a href="/">首页</a></el-breadcrumb-item>
    <el-breadcrumb-item v-for="item in path_list"><el-link :href="item.path">{{ item.name }}</el-link></el-breadcrumb-item>
  </el-breadcrumb>
  <el-link href="/admin" v-show="$route.matched[0]?.name!='后台管理'"><el-icon><Setting /></el-icon></el-link>
</div>
  <router-view />
  <div class="bottom">
    <span>版权所有：重庆市经济和信息化委员会</span>
    <span>ICP备案号：渝ICP备10019353号-6  渝公网安备50019002501621号</span>
    <span>地址：重庆市两江新区云杉南路12号</span>
  </div>
</div>
</template>

<style lang="scss" scoped>
.container{
  display: flex;
  flex-direction: column;
  align-items: center;
  .top{
    width:100%;
    padding-top:5%;
    padding-bottom:10%;
    padding-left:5%;
    background-image: url("/top.jpg");
    background-size: 100% 100%;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    .title{
      display:flex;
      align-items:center;
      font-family:"楷体", "宋体", STXihei, "华文细黑", "Microsoft YaHei", "微软雅黑";
      font-size:50px;
      font-weight:bolder;
      color:white;
      span{
        font-size:25px;
        margin-left:15px;
      }
    }
    .period{
      color:white;
      span{
        margin-right:5px;
      }
    }
  }
  .navigator{
    width:100%;
    background-color:#d3dce6;
    padding:5px;
    display:flex;
    align-items:center;
    justify-content: space-between;
  }
  .bottom{
    background-color:gray;
    color:white;
    display:flex;
    flex-direction:column;
    width:100%;
    margin:20px 0 0 0;
    padding: 20px 0 10px 0;
    span{
      font-size:small;
      margin-left:20px;
    }
  }
}
</style>
